<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-alert
        :closable="false"
        title="注意：只允许为第三级分类设置相关参数！"
        type="warning"
        show-icon
      >
      </el-alert>
      <p>
        选择商品分类：

        <el-cascader
          @change="handleClick"
          v-model="pid"
          :options="data"
          :props="{
            value: 'cat_id',
            label: 'cat_name',
            expandTrigger: 'hover',
          }"
        ></el-cascader>
      </p>
      <el-tabs @tab-click="handleClick" v-model="activeName">
        <!-- 左 -->
        <el-tab-pane label="动态参数" name="many">
          <el-button type="primary" :disabled="!catId" @click="visible = true"
            >添加参数</el-button
          >
          <Table :cols="cols" :data="list" rowKey="attr_id">
            <template v-slot:menus="{ row }">
              <el-tag
                :key="index"
                v-for="(tag, index) in row.tags"
                closable
                :disable-transitions="false"
                @close="handleClose(row, index)"
              >
                {{ tag }}
              </el-tag>
              <el-input
                autofocus
                class="input-new-tag"
                v-if="inputVisible"
                v-model="row.value"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm(row)"
                @blur="handleInputConfirm(row)"
              >
              </el-input>
              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="show()"
                >+ New Tag</el-button
              >
            </template>
            <template v-slot:action="{ row }">
              <button
                data-v-8e881f78=""
                type="button"
                class="el-button el-button--mini"
              >
                <!----><i class="el-icon-edit"></i><span>编辑</span>
              </button>
              <button
                data-v-8e881f78=""
                type="button"
                class="el-button el-button--danger el-button--mini"
              >
                <!----><i class="el-icon-search"></i><span>删除</span>
              </button>
            </template>
          </Table>
        </el-tab-pane>
        <!-- 右 -->
        <el-tab-pane label="配置管理" name="only" rowKey="attr_id">
          <Table :cols="cols" :data="list">
            <template v-slot:menus="{ row }">
              <el-tag
                :key="index"
                v-for="(tag, index) in row.tags"
                closable
                :disable-transitions="false"
                @close="handleClose(row, index)"
              >
                {{ tag }}
              </el-tag>
              <el-input
                autofocus
                class="input-new-tag"
                v-if="inputVisible"
                v-model="row.value"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm(row)"
                @blur="handleInputConfirm(row)"
              >
              </el-input>
              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="show()"
                >+ New Tag</el-button
              >
            </template>
            <template v-slot:action="{ row }">
              <button
                data-v-8e881f78=""
                type="button"
                class="el-button el-button--mini"
              >
                <!----><i class="el-icon-edit"></i><span>编辑</span>
              </button>
              <button
                data-v-8e881f78=""
                type="button"
                class="el-button el-button--danger el-button--mini"
              >
                <!----><i class="el-icon-search"></i><span>删除</span>
              </button>
            </template>
          </Table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 弹出框 -->
    <el-dialog :visible.sync="visible" title="添加动态参数">
      <el-form :rules="rules" :model="ruleForm" ref="ruleForm">
        <el-form-item prop="attr_name" label="动态参数" label-width="80px">
          <el-input v-model="ruleForm.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Table from "@/components/Table.vue";
import {
  getCategoriess,
  getArrList,
  Handel,
  updatagetadd,
  getaddList,
} from "@/api/goods";
export default {
  components: { Table },
  computed: {
    catId() {
      return this.paramsId.length < 3 ? undefined : this.paramsId.slice(-1)[0];
    },
    pid: {
      set(value) {
        this.paramsId = value.length < 3 ? [] : value;
      },
      get() {
        return this.paramsId;
      },
    },
  },
  data() {
    return {
      ruleForm: {
        attr_name: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      visible: false,
      paramsId: [],
      activeName: "many",
      /**
       * 分类ID
       */

      data: [],
      list: [],
      inputVisible: false,
      inputValue: "",
      //属性id

      cols: [
        {
          title: "",
          type: "expand",
          slot: "menus",
        },
        {
          title: "",
          type: "index",
        },
        {
          title: "参数名称",
          name: "attr_name",
        },
        {
          slot: "action",
          title: "操作",
          width: 270,
        },
      ],
    };
  },
  created() {
    this.getdataList();
  },
  methods: {
    //提交
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // alert('submit!');
          // console.log(1)
          try {
            let res = await getaddList({
              id: this.catId,
              attr_name: this.ruleForm.attr_name,
              attr_sel: this.activeName,
            });
            if (res.meta.status == 201) {
              this.handleClick();
              this.visible = false;
            }
            console.log(res);
          } catch (error) {
            console.log(error);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //删除tag标签
    async handleClose(row, index) {
      try {
        row.tags.splice(index, 1);
        row.attr_vals = row.tags.join("");
        await updatagetadd(this.catId, row);
        this.$message.success("删除成功");
        this.handleClick();
      } catch (error) {
        console.log(error);
      }
    },
    show() {
      this.inputVisible = true;
    },
    //tag数据
    async handleInputConfirm(row) {
      const value = row.value?.trim();
        const { attr_name, attr_sel } = row;
      try {
        if (!value) return;
        const attr_vals = [...row.tags, value].join(",");
         await Handel(this.catId, row.attr_id,{
          attr_vals,
          attr_name,
          attr_sel
        });
        row.value=""
        this.inputVisible=false
        row.tags.push(value)
        this.$message.success("添加成功")
        this.handleClick();
      } catch (error) {}
    },

    // 表格数据
    async handleClick() {
      try {
        if (!this.catId) return;
        let res = await getArrList(this.catId, this.activeName);

        this.list = res.data;
        res.data.forEach((item) => {
          this.$set(item, "visible", false);
          this.$set(item, "value", "");
          item.tags = item.attr_vals?.split(",")?.filter((c) => c) || [];
        });

        console.log(res, "112");
      } catch (error) {}
    },
    //获取下拉菜单的数据
    async getdataList() {
      try {
        let res = await getCategoriess();
        this.data = res.data;
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-card {
  margin-top: 15px;
}
.item-menis {
  margin-left: 40px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>